<template>
  <div class="rgb-container">
    <div class="title" @click.self="cpValue(copyValue)">RGB</div>
    <div class="rgb-input-group">
      <input type="number" class="rgb-input" v-model="rInput" @keydown.enter="toHex"/>
      <input type="number" class="rgb-input" v-model="gInput" @keydown.enter="toHex"/>
      <input type="number" class="rgb-input" v-model="bInput" @keydown.enter="toHex"/>
    </div>
    <div class="iconfont youjiantou icon" @click="toHex"/>
  </div>
</template>

<script lang="ts">
// @ts-ignore
import store from '@/store/index.js';
import { useStore } from "vuex";
import {computed, ref, watch} from 'vue';
import {isFloatNum} from "@/utils/tool";
// @ts-ignore
import {rgbToHex} from "@/utils/convert";
import {message} from "ant-design-vue";

export default {
  setup() {
    const rInput = ref('')
    const gInput = ref('')
    const bInput = ref('')
    const copyValue = ref('R:255 G:255 B:255')
    const store = useStore()
    const conv = computed(() => store.state.convent)
    function toHex() {
      // @ts-ignore
      const r = isFloatNum(rInput.value) ? rInput.value: 0;
      // @ts-ignore
      const g = isFloatNum(gInput.value) ? rInput.value: 0;
      // @ts-ignore
      const b = isFloatNum(bInput.value) ? rInput.value: 0;
      // 复制当前rgb
      copyValue.value = `R:${r} G:${g} B:${b}`
      // 转换后的hex
      const hex = rgbToHex(r,g,b)
      if(hex !== undefined) {
        store.commit('setConvent',{
          rgb: [r,g,b],
          hex: hex,
          tag: 'FRGB'
        })
      }
    }
    // 监听来自hex的值
    watch(conv,(newValue:any) => {
      if(newValue.tag === 'FHEX') {
        const conventRgb = JSON.parse(JSON.stringify(newValue.rgb))
        rInput.value = conventRgb[0]
        gInput.value = conventRgb[1]
        bInput.value = conventRgb[2]
        copyValue.value = `R:${conventRgb[0]} G:${conventRgb[1]} B:${conventRgb[2]}`
      }
    },{
      immediate: false,
      deep: true
    })
    
    function cpValue(value:any) {
      let oInput = document.createElement("input"); //创建一个input标签
      oInput.setAttribute("value",value);   // 设置改input的value值
      document.body.appendChild(oInput); // 将input添加到body
      oInput.select(); // 获取input的文本内容
      document.execCommand("copy"); // 执行copy指令
      document.body.removeChild(oInput); // 删除input标签
      message.success(`复制成功，${value}`,2)
    }
    
    return {
      rInput,gInput,bInput,toHex,cpValue,copyValue
    }
  },
}
</script>

<style scoped lang="scss">
/* #ced4da */
.title {
  margin-left: 4px;
  font-weight: bold;
}

.rgb-container {
  display: flex;
  align-items: center;
  width:129%;
  justify-content: space-between;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.rgb-input-group {
  display: flex;
  flex-wrap: nowrap;
  width: 64.2%;
}


.rgb-input {
  width: 35%;
  margin: 0 3px;
  border-radius: 6px;
  border: 1px solid #ced4da;
}

.icon {
  font-size: 20px;
  background-color: aliceblue;
}

.rgb-input,input::-webkit-outer-spin-button,
.rgb-input,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.rgb-input,input[type='number']{
  -moz-appearance: textfield;
}

</style>
